<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <!-- 头部导航 -->
    <div class="top">
        <div class="navigation-top wrapper">
            <ul>
                <li>小米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>小米网移动版</li>
                <li>问题反馈</li>
                <li>Select Region</li>
            </ul>
        </div>
    </div>
    <!-- logo区域 -->
    <div class="top-logo wrapper">
        <img class="logo1" src="./images/logo.png" alt="">
        <img class="logo2" src="./images/new.gif" alt="">
        <ul>
            <li>小米手机</li>
            <li>红米</li>
            <li>平板</li>
            <li>电视</li>
            <li>盒子影音</li>
            <li>路由器</li>
            <li>智能硬件</li>
            <li>服务</li>
            <li>社区</li>
        </ul>
    </div>
    <!-- 视频选项卡 -->
    <div class="picture wrapper">
        <ul>
            <li>手机 平板 电话卡</li>
            <li>电视 盒子</li>
            <li>路由器 智能硬件</li>
            <li>移动电源 插线板</li>
            <li>耳机 音箱</li>
            <li>电池 存储卡</li>
            <li>保护套 后盖</li>
            <li>贴膜 其他配件</li>
            <li>米兔 服装</li>
            <li>箱包 其他周边</li>
        </ul>
        <img src="./images/banner.png" alt="">
    </div>
    <!-- 照片f4 -->
    <div class="f4 wrapper">
        <div class="f4-1">
            <p>我就是一个空色块</p>
            <p>一言不合就这么任性</p>
        </div>
        <img src="./images/pro1.png" alt="">
        <img src="./images/pro2.png" alt="">
        <img src="./images/pro3.png" alt="">
    </div>
    <!-- 下半部分 -->
    <div class="commodity ">
        <!-- 标题 -->
        <div class="title wrapper">
            <h3>智能硬件</h3>
            <h3>查看全部</h3>
        </div>
        <!-- 商品区域 -->
        <!-- 内容 -->
        <div class="content wrapper">
            <div class="left">
                <a href="#"><img src="./images/girl.jpg" alt=""></a>
            </div>

            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="cx">
                                <span>免邮费</span>
                            </div>
                            <div class="pic"><img src="./images/d1.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>小米路由器3</h3>
                                    <p>四天线设计，更安全更稳定</p>
                                </div>
                                <p class="qqq">149元</p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d2.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>米家 LED 智能台灯</h3>
                                    <p>无可视频闪，亮度色温无级调节</p>
                                </div>
                                <p class="qqq">169元</p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="cx">
                                <span>免邮费</span>
                            </div>
                            <div class="pic"><img src="./images/d3.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>小米净水器 厨下式</h3>
                                    <p>RO反渗透直出纯净水，包邮包安装</p>
                                </div>
                                <p class="qqq">1999元</p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d4.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>小蚁智能摄像机 夜视版</h3>
                                    <p>能看能听能说，手机远程观看</p>
                                </div>
                                <p class="qqq">149元</p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d5.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>Yeelight床头灯</h3>
                                    <p>触摸式操作，给卧室1600万种颜色</p>
                                </div>
                                <p class="qqq">249元</p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d6.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>小米空气净化器2</h3>
                                    <p>10分钟，房间空气焕然一新</p>
                                </div>
                                <p class="qqq">699元</p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="cx1">
                                <span>享9折</span>
                            </div>
                            <div class="pic"><img src="./images/d7.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>小米智能安防套装</h3>
                                    <p>智能警戒，为您的家增添一份安心</p>
                                </div>
                                <p class="qqq">169元 <span>188元</span></p>
                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d8.jpg" alt=""></div>
                            <div class="text">
                                <div class="info">
                                    <h3>米家iHealth血压计</h3>
                                    <p>爸妈上手就会用的智能血压计</p>
                                </div>
                                <p class="qqq">399元</p>
                            </div>
                        </a>

                    </li>

                </ul>


            </div>

        </div>

    </div>
    <!-- 帮助中心 -->
    <div class="hotline wrapper">
        <div class="left">
            <dl>
                <dt>帮助中心</dt>

                <dd><a href="#">账户管理</a></dd>

                <dd><a href="#">购物指南</a></dd>

                <dd><a href="#">订单操作</a></dd>

            </dl>

            <dl>
                <dt>服务支持</dt>

                <dd><a href="#">售后政策</a></dd>

                <dd><a href="#">自助服务</a></dd>

                <dd><a href="#">相关下载</a></dd>

            </dl>

            <dl>
                <dt>线下门店</dt>

                <dd><a href="#">小米之家</a></dd>

                <dd><a href="#">服务网点</a></dd>

                <dd><a href="#">零售网点</a></dd>

            </dl>

            <dl>
                <dt>关于小米</dt>

                <dd><a href="#">了解小米</a></dd>

                <dd><a href="#">加入小米</a></dd>

                <dd><a href="#">官方微信</a></dd>

            </dl>
            <dl>
                <dt>特色服务</dt>

                <dd><a href="#">F 码通道</a></dd>

                <dd><a href="#">小米移动</a></dd>

                <dd><a href="#">防伪查询</a></dd>

            </dl>

        </div>
        <div class="xian"></div>
        <dl class="ab">
            <dt>400-100-5678</dt>

            <dd><a href="#">周一至周日 8:00-18:00</a></dd>

            <dd><a href="#">（仅收市话费）</a></dd>

        </dl>

    </div>
    <!-- 版权区域 -->
    <div class="bjbj">
        <div class="copyright wrapper">
            <div class="a1">
                <img src="./images/logo.png" alt="">
                <div>
                    <ul>
                        <li><a href="#">小米网</a></li>
                        <li><a href="#">MIUI</a></li>
                        <li><a href="#">米聊</a></li>
                        <li><a href="#">多看书城</a></li>
                        <li><a href="#">小米路由器</a></li>
                        <li><a href="#">视频电话</a></li>
                        <li><a href="#">小米后院</a></li>
                        <li><a href="#">小米天猫店</a></li>
                        <li><a href="#">小米淘宝直营店</a></li>
                        <li><a href="#">小米联盟</a></li>
                        <li><a href="#">问题反馈</a></li>
                        <li><a href="#">Select Region</a></li>
                    </ul>
                    <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
                    <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                </div>
            </div>
            <div class="zp">
                <img src="./images/bottom.png" alt="">
            </div>
        </div>

    </div>


</body>

</html>